ทำการติดตั้ง Extention Remote – SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode

ครั้งนี้ผมจะมาแนะนำวิธี ทำการติดตั้ง Extention Remote - SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode ครับ

สิ่งที่ต้องมี

วิธีการติดตั้ง Visual Studio Code บน Windows 10/11

ให้ทำการติดตั้งโปรแกรม Visual Studio Code ตามลิงก์ด้านล่างนี้ (สำหรับคนที่มีอยู่แล้วข้ามขั้นตอนนี้ไปได้เลยครับ)

---

วิธีสร้าง Amazon Linux 2 บน EC2 สำหรับเชื่อมต่อ Instance ด้วยโปรแกรม Visual Studio Code

*สามารถใช้ AMI อื่นได้ เช่น Amazon Linux 2023 AMI หรือ Ubuntu แต่ต้องระวังตอนป้อน User ด้วย เนื่องจากแต่ละ AMI สำหรับ Linux แต่ละอันจะแตกต่างกันดังนี้
・สำหรับ Amazon Linux (Amazon Linux 2, Amazon Linux 2023 AMI): User = ec2-user
・สำหรับ Ubuntu: User = ubuntu

ให้ทำการติดตั้ง EC2 Instance (Amazon Linux 2) โดยดูตามลิงก์ด้านล่างนี้เป็นตัวอย่างได้เลย (สำหรับคนที่มีอยู่แล้วข้ามขั้นตอนนี้ไปได้เลยครับ)
หมายเหตุ: ไม่ต้องทำหัวข้อย่อยของ ❌ การ Connect to EC2 by PuTTY เพราะว่าเราจะใช้ VSCode เชื่อมต่อกับ Server EC2 Instance ครับ

ส่วนที่ต้องระวังคือ ตอนสร้าง Key Pair เพราะมีส่วนของ Private key file format ที่ตั้งค่าไม่เหมือนกัน ซึ่งในบทความตัวอย่างจะเป็น [ Private key file format: ◉ .ppk ] แต่ในบทความนี้เราจะใช้เป็น [ Private key file format: ◉ .pem ] ครับ

ตัวอย่างตั้งค่าการสร้าง EC2 Instance ในบทความนี้

※Create Key pairs

Key pair

Key pairs:tinnakorn-test
Key pair type:RSA
Private key file format: ◉pem

※Launch instances

Name and tags

Name:tinnakorn-test

Application and OS Images (Amazon Machine Image)

Amazon Machine Image (AMI):Amazon Linux 2 AMI (HVM) - Kernel 5.10, SSD Volume Type(Default)

Instance type

Instance type:t3a.nano

Key pair (login)

Key pair name - required:tinnakorn-test

Network settings

Firewall (security groups)

Security group name - required:tinnakorn-test
Description - required:tinnakorn-test

Inbound security groups rules

Security group rule 1 (TCP, 22, 0.0.0.0/0)

Type:ssh ▼| Source type:My IP ▼| Source:xxx.xxx.x.xxx/32 ✕

Configure storage

1x:8GiBgp2 ▼Root volume (Default)

เมื่อทำการติดตั้ง Visual Studio Code และสร้าง EC2 Instance (Amazon Linux 2) ในหัวข้อ สิ่งที่ต้องมี เสร็จเรียบร้อยแล้ว ให้ทำขั้นตอนถัดไปได้เลยครับ

การติดตั้ง Extension [ Remote - SSH ]

เปิดโปรแกรม VSCode ขึ้นมา ถ้าเปิดอยู่แล้วให้มาที่แถบด้านซ้ายสุด แล้วทำตามขั้นตอนดังนี้:
① เลือกสัญลักษณ์ Extension ตามรูปภาพ
② พิมพ์คำว่าRemote - SSHลงในช่อง Extension
③ คลิกที่Remote - SSHอันแรกสุด
④ มาที่ด้านขวา คลิกที่Install

เมื่อติดตั้ง Remote - SSH เสร็จแล้ว ดูที่แถบด้ายซ้ายสุดจะเห็นว่ามีไอคอนเพิ่มขึ้นมาเหมือนกับรูปภาพนี้

ตั้งค่าการเชื่อมต่อโดยใช้ Extension [ Remote - SSH ]

ขั้นตอนนี้ผมจะทำการเชื่อมต่อกับ Server EC2 (Amazon Linux 2) โดยใช้ VSCode

ตั้งค่าการเชื่อมต่อดังนี้:
» คลิกที่ไอคอนRemote - SSH
» คลิกที่ไอคอน⚙ตั้งค่า
» เลือกอันที่เป็น User ของเราและตามด้วย~/.ssh/config

กรณีที่การตั้งค่านี้ไม่มีความจำเป็นหรือไม่ต้องการใช้ ให้ทำการลบออกได้เลยครับ

Copy ข้อมูลด้านล่างนี้ไปใส่ในไฟล์ config และแก้ไขข้อมูลบางส่วนให้เป็นของคุณดังนี้:
» Host (ตั้งชื่ออะไรก็ได้โดยใช้ภาษาอังกฤษเท่านั้น)
» Hostname (IP Address Instance)
» IdentityFile (~/.ssh/[your_key_pair.pem])
» ส่วน User กับ Port ไม่ต้องตั้งค่าอะไร
» เมื่อแก้ไขข้อมูลเสร็จแล้ว ทำการ Save โดยกดปุ่มCtrl + sที่แป้นพิมพ์ได้เลยครับ

Host [your_host]
    Hostname [your_ip_address_instance]
    User ec2-user
    Port 22
    IdentityFile ~/.ssh/[your_key_pair.pem]

ย้ายไฟล์key_pair.pemของเราไปวางในโฟลเดอร์.sshตาม Path ที่เราเลือกไว้ในตอนแรก เพื่อให้ IdentityFile สามารถมองเห็นไฟล์key_pair.pemได้ เช่น [ This PC › Windows-SSD (C:) › Users › your_name › .ssh ]

มาที่ช่องด้านซ้าย เอาเมาส์มาชี้ตรงชื่อ EC2 Instance ของเราค้างไว้ แล้วจะมีไอคอน Connect to Host in New Windows แสดงขึ้นมา จากนั้นคลิกที่ไอคอนนี้ได้เลย

เมื่อหน้าต่างโปรแกรม VSCode ใหม่เปิดขึ้นมาแล้ว เลือกLinuxครับ

เลือกContinueครับ

เมื่อเชื่อมต่อได้แล้ว ด้านล่างซ้ายสุดจะแสดงหน้าจอแบบนี้ครับ
จากนั้นให้ปิดโปรแกรม VSCode หน้าที่เราใช้ตั้งค่าเมื่อสักครู่นี้ได้เลยครับ

วิธีการ Start Terminal

ขั้นตอนนี้ผมจะสาธิตวิธีการเริ่มต้นใช้งาน Terminal โดยมี 2 วิธีครับ

กลับมาที่หน้าโปรแกรม VSCode ที่เชื่อมต่อกับ EC2 Instance (Amazon Linux 2) เมื่อสักครู่นี้
จากนั้นอ่านคำอธิบายและคลิกดูที่รูปภาพเพื่อดูวิธีการเริ่มต้นใช้งาน Terminal ได้เลยครับ

เมื่อ Start Terminal ได้แล้วจะแสดงหน้าจอแบบนี้ครับ

เปิด Folder Server EC2 Instance (Amazon Linux 2)

คลิกFileและเลือกOpen Folder...

เมื่อคลิก Open Folder แล้วจะแสดงหน้าจอแบบนี้ ซึ่งค่าเริ่มต้นจะเป็น [ /home/ec2-user/ ] จากนั้นคลิกปุ่มOKได้เลย (นอกจากโฟลเดอร์นี้แล้วเราสามารถเลือกโฟลเดอร์อื่นๆได้ด้วยครับ)

ติ๊ก✅Trust the authors of all file in the parent folder 'home'
จากนั้นคลิก [ Yes, I trust the authors Trust folder and enable all features ]

เมื่อเปิดโฟลเดอร์เสร็จแล้วจะแสดงหน้าจอแบบนี้ (ถ้าไอคอนข้างหน้าชื่อไฟล์ไม่เหมือนกันก็ไม่เป็นไร เพราะโปรแกรม VSCode ที่ผมใช้สาธิตนี้ ผมได้ติดตั้ง Extension [ vscode-icons ] ลงไป จึงทำให้ไอคอนไม่เหมือนกันครับ)
ในส่วนของหน้า Get started ให้คลิก✕ออกไปได้เลยครับ

เกี่ยวกับรหัสฟีดบรรทัด (New Line) [ LF, CRLF ]

การตั้งค่า LF

การใช้งานใน Linux จะใช้ LF กับ UTF8 ซึ่งเราสามารถเปลี่ยนจาก CRLF เป็น LF ได้ง่ายๆโดยคลิกที่CRLFและเลือกLFที่แสดงขึ้นมาด้านบน

ดูที่ด้านล่างขวาอีกครั้ง จะเห็นว่า Select End of Line Sequence (การเลือกลำดับท้ายบรรทัด) เปลี่ยนเป็นLFเรียบร้อยแล้ว

การตั้งค่า UTF-8

คลิกที่UTF-8และเลือกSave with Encoding

เลือกUTF-8 utf8

เพียงเท่านี้การตั้งค่า LF กับ UTF-8 ก็เสร็จเรียบร้อยครับ

อ้างอิง: VS Codeで改行コードを変更するには (การเปลี่ยนรหัสฟีดบรรทัดใน VS Code)

---

การสร้างไฟล์ใน Server EC2 Instance ผ่าน VSCode

ขั้นตอนนี้ผมจะสาธิตการอัปโหลดไฟล์โดยการสร้างไฟล์ลงใน Server EC2 ผ่าน VSCode โดยตรงเลยครับ

ใส่ข้อมูลอะไรที่เราต้องการ และทำการ Save เพียงเท่านี้ก็เสร็จเรียบร้อยครับ

ต่อไปผมจะลองสร้างและเพิ่มข้อมูลที่เป็นไฟล์ Markdown ขึ้นมาอีก 1 อันโดยใช้ชื่อว่าtest.mdและเพิ่มข้อมูลลงไปครับ (ไฟล์จะเปลี่ยนประเภทไปตามนามสกุลไฟล์ที่เราสร้างครับ)

เมื่อเพิ่มข้อมูลเสร็จแล้ว คลิกที่ไอคอนOpen Previewด้านขวาบนตามรูปภาพ

เมื่อ Preview ออกมาแล้ว จะแสดงหน้าจอแบบนี้ และหากไม่ต้องการใช้หน้าต่าง Preview นี้ให้คลิก✕ที่ [ Preview file_name.md ] ออกได้เลย (Open Preview นี้ใช้ได้เฉพาะไฟล์.mdเท่านั้นครับ)

เพียงเท่านี้การสร้างไฟล์ใน Server EC2 Instance ผ่าน VSCode ก็เสร็จเรียบร้อยแล้ว นอกจากนี้เรายังสามารถสร้างไฟล์โดยใช้viใน Terminal ของ VSCode เหมือนกับโปรแกรม PuTTY ได้อีกด้วยครับ

---

การอัปโหลดไฟล์

ขั้นตอนนี้ผมจะทำการอัปโหลดไฟล์ Image จาก Windows ไปยัง Server EC2 Instance ผ่าน VSCode

เพื่อให้เห็นภาพมากขึ้น ผมจะอัปโหลดไฟล์ Image จาก Windows ไปยัง Server EC2 Instance โดยการ Copy หรือคลิกที่ไฟล์ค้างไว้และลากไฟล์จากเครื่องคอมพิวเตอร์ของเรามาวางในส่วน Explorer ของ VSCode ครับ

เมื่อ Copy หรือลากไฟล์รูปภาพมาวางเสร็จแล้ว จะแสดงหน้าจอแบบนี้ครับ

เพียงเท่านี้การอัปโหลดไฟล์ Image จาก Windows ไปยัง Server EC2 Instance ผ่าน VSCode ก็เสร็จเรียบร้อยแล้วครับ

---

ตรวจสอบไฟล์ใน Server EC2 ผ่าน Terminal

เปิด Terminal ขึ้นมา แล้วรันคำสั่งด้านล่างนี้เพื่อตรวจสอบไฟล์ที่เราได้สร้างลงไป

ll

จะเห็นว่ามีไฟล์ที่ชื่อ [ test_image.png, test.md และ text.txt ] ตามที่เราได้สร้างไว้เมื่อสักครู่นี้ และถ้าเราต้องการออกจาก Terminal ก็สามารถคลิก✕ที่ด้านมุมขวาบนของหน้า Terminal ได้เลยครับ

---

การดาวน์โหลดไฟล์

ขั้นตอนนี้ผมจะสาธิตการดาวน์โหลดไฟล์จาก Server EC2 Instance ลงในเครื่องคอมพิวเตอร์โดยผ่าน VSCode ครับ

สมมติว่าผมต้องการไฟล์ text.md ไปใช้งานต่อที่โปรเจกต์อื่น ผมก็จะดาวน์โหลดไฟล์ดังนี้:
» คลิกซ้ายที่ไฟล์text.md1 ครั้ง
» คลิกขวาที่ไฟล์text.mdและเลือกDownload...
» เลือกที่เก็บไฟล์ในคอมพิวเตอร์ของคุณและคลิกDownload

ทีนี้ก็เปิดโฟลเดอร์ที่เราเก็บไฟล์ดาวน์โหลดไว้ ของผมเก็บไว้ที่ [ This PC › Download ] จะเห็นว่ามีไฟล์text.mdที่ผมทำการดาวน์โหลดมาเมื่อสักครู่นี้ครับ

※ข้อควรระวัง: User ที่กำลังเชื่อมต่อด้วยการตั้งค่านี้คือ ec2-user โปรดใช้ความระมัดระวัง ในกรณีที่จัดการไฟล์ที่ไม่สามารถแก้ไขได้ด้วย ec2-user เช่น ไฟล์ที่สร้างขึ้นด้วย Account root (User หลังจากทำการ sudo su - ไปแล้ว)

สำหรับคนที่ต้องการแก้ไขหรือเปลี่ยนแปลงโฟลเดอร์ด้วย VSCode แนะนำให้ทำการตั้งค่าโดยรันคำสั่งด้านล่างนี้ครับ

chmod -R ugo+rw [folder]

สรุป

การสาธิตวิธีทำการติดตั้ง Extention Remote - SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode ก็เสร็จเรียบร้อยแล้วครับ ซึ่งโปรแกรม VSCode นี้นอกจากจะสามารถเขียนโปรแกรมได้แล้ว ยังสามารถใช้ Remote ไปยัง Server EC2 Instance (Amazon Linux 2) ได้อีกด้วย สำหรับผมแล้วการใช้งาน Server EC2 ใน VSCode นี้มีความสะดวกในการจัดการข้อมูลเป็นอย่างมากครับ

บทความที่เกี่ยวข้อง

• วิธีการติดตั้ง Visual Studio Code บน Windows 10/11
• 【Update】วิธีติดตั้ง Amazon Linux 2 บน EC2 และเชื่อมต่อเซิร์ฟเวอร์ด้วยโปรแกรม PuTTY
• https://code.visualstudio.com/ (ภาษาอังกฤษ)
• Visual Studio Code Remote - SSH (ภาษาอังกฤษ)
• VS Codeで改行コードを変更するには (ภาษาญี่ปุ่น)